<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('PK对战')" />
    <style>
      .battle-card {
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
        transition: all 0.3s;
      }
      .battle-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }
      .battle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
      }
      .battle-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      .battle-status {
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
      }
      .status-waiting {
        background-color: #fff7e6;
        color: #fa8c16;
      }
      .status-progress {
        background-color: #e6f7ff;
        color: #1890ff;
      }
      .status-finished {
        background-color: #f6ffed;
        color: #52c41a;
      }
      .battle-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
      }
      .info-item {
        display: flex;
        flex-direction: column;
      }
      .info-label {
        font-size: 12px;
        color: #8c8c8c;
        margin-bottom: 4px;
      }
      .info-value {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
      .battle-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }
      .tab-content {
        display: none;
      }
      .tab-content.active {
        display: block;
      }
      .tabs {
        display: flex;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: 20px;
      }
      .tab {
        padding: 12px 24px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
      }
      .tab.active {
        border-bottom: 2px solid #1890ff;
        color: #1890ff;
        font-weight: bold;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="searchForm">
            <div class="select-list">
              <ul>
                <li>
                  <label>对战编号：</label>
                  <input type="text" name="battleNo" />
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="resetSearch()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="add()"
            shiro:hasPermission="system:exam:pk:add"
          >
            <i class="fa fa-plus"></i> 发起挑战
          </a>
          <a
            class="btn btn-success"
            onclick="view(1)"
            shiro:hasPermission="system:exam:pk:add"
          >
            <i class="fa fa-plus"></i> 发起挑战
          </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
          <div class="tabs">
            <div class="tab active" data-tab="challenged">被挑战列表</div>
            <div class="tab" data-tab="ongoing">正在对战</div>
            <div class="tab" data-tab="finished">已完成对战</div>
          </div>

          <div class="tab-content active" id="challenged-tab">
            <table id="bootstrap-table-challenged"></table>
          </div>

          <div class="tab-content" id="ongoing-tab">
            <table id="bootstrap-table-ongoing"></table>
          </div>

          <div class="tab-content" id="finished-tab">
            <table id="bootstrap-table-finished"></table>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />

    <script th:inline="javascript">
      var editFlag = [[${@permission.hasPermi('system:exam:pk:edit')}]];
      var removeFlag = [[${@permission.hasPermi('system:exam:pk:remove')}]];
      var viewFlag = [[${@permission.hasPermi('system:exam:pk:view')}]];
      var acceptFlag = [[${@permission.hasPermi('system:exam:pk:accept')}]];

      // 当前激活的标签页
      var activeTab = 'challenged';

      $(function() {
          // 初始化三个表格
          initChallengedTable();
          initOngoingTable();
          initFinishedTable();

          // 标签页切换
          $('.tab').on('click', function() {
              var tab = $(this).data('tab');
              activeTab = tab;

              $('.tab').removeClass('active');
              $(this).addClass('active');

              $('.tab-content').removeClass('active');
              $('#' + tab + '-tab').addClass('active');

              // 切换时刷新对应表格数据
              if (tab === 'challenged') {
                  $('#bootstrap-table-challenged').bootstrapTable('refresh');
              } else if (tab === 'ongoing') {
                  $('#bootstrap-table-ongoing').bootstrapTable('refresh');
              } else {
                  $('#bootstrap-table-finished').bootstrapTable('refresh');
              }
          });

          // 首次进入默认激活被挑战列表标签
          $('.tab[data-tab="challenged"]').trigger('click');
      });

      function initChallengedTable() {
          var options = {
              url: ctx + "system/exam/pk/listByUser", // 获取被挑战列表
              method: 'post',
              createUrl: ctx + "system/exam/pk/add", // 创建新对战
              editUrl: ctx + "system/exam/pk/edit/{id}", // 编辑对战
              removeUrl: ctx + "system/exam/pk/remove", // 删除对战
              viewUrl: ctx + "system/exam/pk/view/{id}", // 查看对战详情
              acceptUrl: ctx + "system/exam/pk/accept/{battleId}", // 接受挑战API
              examUrl: ctx + "system/exam/pk/exam?battleId={battleId}", // 进入答题页
              modalName: "PK对战",
              columns: [{
                  checkbox: true
              },
              {
                  field: 'battleNo',
                  title: '对战编号',
                  sortable: true
              },
              {
                  field: 'initiatorName',
                  title: '发起者',
                  formatter: function(value, row, index) {
                      return row.initiatorName || '未知用户';
                  }
              },
              {
                  field: 'challengerName',
                  title: '挑战者',
                  formatter: function(value, row, index) {
                      if (row.challengerName) {
                          return row.challengerName;
                      } else if (row.battleStatus == 1) {
                          return '<span class="badge badge-warning">等待应战</span>';
                      } else {
                          return '未知用户';
                      }
                  }
              },
              {
                  field: 'battleStatus',
                  title: '对战状态',
                  align: 'center',
                  formatter: function(value, row, index) {
                      if (value == 1) {
                          return '<span class="battle-status status-waiting">等待应战</span>';
                      } else if (value == 2) {
                          return '<span class="battle-status status-progress">对战中</span>';
                      } else if (value == 3) {
                          return '<span class="battle-status status-finished">已结束</span>';
                      } else {
                          return '未知状态';
                      }
                  }
              },
              {
                  field: 'startTime',
                  title: '开始时间',
                  sortable: true,
                  formatter: function(value, row, index) {
                      return value ? value : '-';
                  }
              },
              {
                  field: 'endTime',
                  title: '结束时间',
                  sortable: true,
                  formatter: function(value, row, index) {
                      return value ? value : '-';
                  }
              },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                      var actions = [];
                      actions.push('<a class="btn btn-info btn-xs ' + viewFlag + '" href="javascript:void(0)" onclick="view(\'' + row.id + '\')"><i class="fa fa-eye"></i> 查看</a> ');

                      if (row.battleStatus == 1) {
                          // 等待应战状态，显示接受挑战按钮
                          actions.push('<a class="btn btn-success btn-xs ' + acceptFlag + '" href="javascript:void(0)" onclick="acceptChallenge(\'' + row.id + '\')"><i class="fa fa-check"></i> 接受挑战</a> ');
                      }

                      return actions.join('');
                  }
              }]
          };

          $('#bootstrap-table-challenged').bootstrapTable(options);
      }

      function initOngoingTable() {
          var options = {
              url: ctx + "system/exam/pk/list", // 获取进行中对战列表
              method: 'post',
              queryParams: function(params) {
                  params.myBattle = 'initiator'; // 会在后端替换为当前用户ID的查询条件
                  params.battleStatus = 2; // 对战中状态
                  return params;
              },
              createUrl: ctx + "system/exam/pk/add", // 创建新对战
              editUrl: ctx + "system/exam/pk/edit/{id}", // 编辑对战
              removeUrl: ctx + "system/exam/pk/remove", // 删除对战
              viewUrl: ctx + "system/exam/pk/view/{id}", // 查看对战详情
              acceptUrl: ctx + "system/exam/pk/accept/{battleId}", // 接受挑战API
              examUrl: ctx + "system/exam/pk/exam?battleId={battleId}", // 进入答题页
              modalName: "PK对战",
              columns: [{
                  checkbox: true
              },
              {
                  field: 'battleNo',
                  title: '对战编号',
                  sortable: true
              },
              {
                  field: 'initiatorName',
                  title: '发起者',
                  formatter: function(value, row, index) {
                      return row.initiatorName || '未知用户';
                  }
              },
              {
                  field: 'challengerName',
                  title: '挑战者',
                  formatter: function(value, row, index) {
                      if (row.challengerName) {
                          return row.challengerName;
                      } else if (row.battleStatus == 1) {
                          return '<span class="badge badge-warning">等待应战</span>';
                      } else {
                          return '未知用户';
                      }
                  }
              },
              {
                  field: 'battleStatus',
                  title: '对战状态',
                  align: 'center',
                  formatter: function(value, row, index) {
                      if (value == 1) {
                          return '<span class="battle-status status-waiting">等待应战</span>';
                      } else if (value == 2) {
                          return '<span class="battle-status status-progress">对战中</span>';
                      } else if (value == 3) {
                          return '<span class="battle-status status-finished">已结束</span>';
                      } else {
                          return '未知状态';
                      }
                  }
              },
              {
                  field: 'startTime',
                  title: '开始时间',
                  sortable: true,
                  formatter: function(value, row, index) {
                      return value ? value : '-';
                  }
              },
              {
                  field: 'endTime',
                  title: '结束时间',
                  sortable: true,
                  formatter: function(value, row, index) {
                      return value ? value : '-';
                  }
              },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                      var actions = [];
                      actions.push('<a class="btn btn-info btn-xs ' + viewFlag + '" href="javascript:void(0)" onclick="view(\'' + row.id + '\')"><i class="fa fa-eye"></i> 查看</a> ');

                      if (row.battleStatus == 2) {
                          // 对战中状态，显示进入答题按钮
                          actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="enterExam(\'' + row.id + '\')"><i class="fa fa-play"></i> 进入答题</a> ');
                      }

                      return actions.join('');
                  }
              }]
          };

          $('#bootstrap-table-ongoing').bootstrapTable(options);
      }

      function initFinishedTable() {
          var options = {
              url: ctx + "system/exam/pk/finishedList",
              method: 'post',
              viewUrl: ctx + "system/exam/pk/view/{id}",
              modalName: "已完成PK对战",
              columns: [{
                  checkbox: true
              },
              {
                  field: 'battleNo',
                  title: '对战编号',
                  sortable: true
              },
              {
                  field: 'initiatorName',
                  title: '发起者',
                  formatter: function(value, row, index) {
                      return row.initiatorName || '未知用户';
                  }
              },
              {
                  field: 'challengerName',
                  title: '挑战者',
                  formatter: function(value, row, index) {
                      return row.challengerName || '未知用户';
                  }
              },
              {
                  field: 'battleStatus',
                  title: '对战状态',
                  align: 'center',
                  formatter: function(value, row, index) {
                      if (value == 1) {
                          return '<span class="battle-status status-waiting">等待应战</span>';
                      } else if (value == 2) {
                          return '<span class="battle-status status-progress">对战中</span>';
                      } else if (value == 3) {
                          return '<span class="battle-status status-finished">已结束</span>';
                      } else {
                          return '未知状态';
                      }
                  }
              },
              {
                  field: 'startTime',
                  title: '开始时间',
                  sortable: true
              },
              {
                  field: 'endTime',
                  title: '结束时间',
                  sortable: true
              },
              {
                  field: 'winnerName',
                  title: '获胜者',
                  formatter: function(value, row, index) {
                      return row.winnerName || '未知';
                  }
              },
              {
                  title: '操作',
                  align: 'center',
                  formatter: function(value, row, index) {
                      var actions = [];
                      actions.push('<a class="btn btn-info btn-xs ' + viewFlag + '" href="javascript:void(0)" onclick="view(\'' + row.id + '\')"><i class="fa fa-eye"></i> 查看详情</a> ');
                      return actions.join('');
                  }
              }]
          };

          $('#bootstrap-table-finished').bootstrapTable(options);
      }

      // 搜索
      function search() {
          var query = {};
          query.battleNo = $("input[name='battleNo']").val();

          if (activeTab === 'challenged') {
              $('#bootstrap-table-challenged').bootstrapTable('refresh', {query: query});
          } else if (activeTab === 'ongoing') {
              $('#bootstrap-table-ongoing').bootstrapTable('refresh', {query: query});
          } else {
              $('#bootstrap-table-finished').bootstrapTable('refresh', {query: query});
          }
      }

      // 重置搜索
      function resetSearch() {
          $("#searchForm")[0].reset();
          search();
      }

      // 发起挑战
      function add() {
          $.modal.open("发起挑战", ctx + "system/exam/pk/add");
      }

      // 查看详情
      function view(id) {
          $.modal.openTab("对战详情", ctx + "system/exam/pk/view/" + id);
      }

      // 接受挑战
      function acceptChallenge(battleId) {
          $.modal.confirm("确认接受挑战？", function() {
              $.operate.post(ctx + "system/exam/pk/accept/" + battleId, {}, function(result) {
                  if (result.code == 0) {
                      $.modal.msgSuccess(result.msg);
                      // 刷新表格
                      if (activeTab === 'challenged') {
                          $('#bootstrap-table-challenged').bootstrapTable('refresh');
                      } else if (activeTab === 'ongoing') {
                          $('#bootstrap-table-ongoing').bootstrapTable('refresh');
                      } else {
                          $('#bootstrap-table-finished').bootstrapTable('refresh');
                      }
                  } else {
                      $.modal.msgError(result.msg);
                  }
              });
          });
      }

      // 进入答题
      function enterExam(battleId) {
          window.location.href = ctx + "system/exam/pk/exam?battleId=" + battleId;
      }
    </script>
  </body>
</html>
